<template>
  <ContentWrap :title="'订单信息'" class="!mb-10px">
    <template #header>
      <slot name="tool"></slot>
    </template>
    <el-scrollbar height="220px">
      <el-row class="custom-text-14">
        <el-col :span="12">
          <div class="mb-15px">
            订单类型:
            <dict-tag class="ml-5px" :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="orderData.type!" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            订单状态:
            <dict-tag
              class="ml-5px"
              :type="DICT_TYPE.TRADE_ORDER_STATUS"
              :value="orderData.status!"
            />
          </div>
        </el-col>

        <el-col :span="12">
          <div class="mb-15px">
            订单来源:
            <dict-text
              class="ml-5px"
              :type="DICT_TYPE.TENANT_IDENTITY"
              :value="orderData.source!"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            订单渠道：
            <el-text class="ml-5px">{{ orderData.terminal! }}</el-text>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            订单号: <span class="ml-5px"> {{ orderData.no }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            销售时间: <span class="ml-5px"> {{ formatDate(orderData.tradeTime!) }}</span>
          </div>
        </el-col>
        <el-divider border-style="dashed" class="mt-0! mb-15px!" />
        <el-col :span="12">
          <div class="mb-15px">
            订单原价:
            <span class="ml-5px"> {{ fenToYuan(orderData.totalPrice!) }} 元</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            总计优惠:
            <span class="ml-5px"> {{ fenToYuan(orderData.givePrice!) }} 元</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            订单实售:
            <span class="ml-5px"> {{ fenToYuan(orderData.realPrice!) }} 元</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="mb-15px">
            订单实付:
            <span class="ml-5px"> {{ fenToYuan(orderData.otherPrice!) }} 元</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            剩余欠款:
            <span class="ml-5px" :class="{ 'c-red': orderData.leavePrice > 0 }">
              {{ fenToYuan(orderData.leavePrice!) }} 元</span
            >
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            剩余支付:
            <span class="ml-5px"> {{ fenToYuan(orderData.payPrice!) }} 元</span>
          </div>
        </el-col>
      </el-row>
    </el-scrollbar>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'OrderBasicInfo' })

defineProps({
  orderData: propTypes.object.def({})
})
</script>
